import React from 'react';
// 引入地图组件
import { TMap, InfoWindow } from '@map-component/react-tmap';
import '@/assets/css/coupon-info.css'
import '@/assets/css/swiper-bundle.min.css'


const Component = () =>
{
    //接收跳转参数
    const [searchParams] = React.Router.useSearchParams()

    let [room, SetRoom] = React.useState({
        name:'',
        price:'',
        state:'',
        thumb_text:'',
        flag_text:[],
        content: '',
        total: 0,
        comment: '',
        thumbs_text: [],
        coupon: [],
        device_text: [],
    })

    React.useEffect(() => {
        RoomData()
    }, [])

    //请求详情
    const RoomData = async () =>
    {
        var result = await React.HTTP.post("/room/info")

        if(result.code == 0)
        {
            React.error(result.msg)
            return false
        }

        SetRoom(result.data)
    }

    // 轮播图组件
    const CouponItem = room.thumbs_text.map((item:any, key) => {
        return (
            <React.UI.Swiper.Item key={key}>
                {key<4 && <React.UI.Image src={item} width={'100%'} fit='fill' />}
            </React.UI.Swiper.Item>
        )
    })

    return (
        <>
            <React.UI.NavBar 
                style={{background: `rgb(55, 68, 134)`, color:'#fff'}}
                back='返回' 
                onBack={React.back}
            >门店详情</React.UI.NavBar>

            <div className="swiper mySwiper">
                    <div className="swiper-wrapper">
                        <div className="swiper-slide">
                        <React.UI.Swiper>
                            {CouponItem}
                        </React.UI.Swiper>
                    </div>
                </div>
                <div className="swiper-pagination"></div>
            </div>

            <div className="hotelinfo">
                <div className="hotelinfo_title">
                    创想第一门店
                </div>
                <div className="hotelinfo_address">
                    广东省深圳市福田区华强北街道振兴路341号上步工业区
                </div>
                <div className="map" id="map">
                    <TMap
                        // 密钥
                        mapKey="BBGBZ-YVMKJ-JGVF7-D62JA-EO7TO-RRFZV"
                        version='1.exp'
                        center={{ lat: 39.984104, lng: 116.307503 }}
                    />
                </div>
                <div className="hotelinfo_desc">
                    <div className="desc_title">简介</div>
                    <div>这里是极速创想第一门店</div>
                </div>
                <div className="hotelinfo_desc">
                    <div className="desc_title">详情</div>
                    <div>这里是极速创想第一门店，欢迎你的预订入住</div>
                </div>
            </div>
        </>
    )
}

export default Component